<template>
  <t-card class="p-4">
    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2">卡片列表</h3>

    <dl class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      <div
        v-for="item in stats"
        :key="item.id"
        class="relative bg-white pt-5 px-4 pb-12 sm:pt-6 sm:px-6 shadow rounded-lg overflow-hidden"
      >
        <dt>
          <div class="absolute bg-indigo-500 rounded-md p-3">
            <component :is="'BellFilled'" class="h-6 w-6 text-white" aria-hidden="true" />
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">{{ item.name }}</p>
        </dt>
        <dd class="ml-16 pb-6 flex items-baseline sm:pb-7">
          <p class="text-2xl font-semibold text-gray-900">
            {{ item.stat }}
          </p>
          <p
            :class="[
              item.changeType === 'increase' ? 'text-green-600' : 'text-red-600',
              'ml-2 flex items-baseline text-sm font-semibold'
            ]"
          >
            <component
              :is="'Top'"
              v-if="item.changeType === 'increase'"
              class="self-center flex-shrink-0 h-5 w-5 text-green-500"
              aria-hidden="true"
            />
            <component
              :is="'Bottom'"
              v-else
              class="self-center flex-shrink-0 h-5 w-5 text-red-500"
              aria-hidden="true"
            />
            <span class="sr-only">
              {{ item.changeType === 'increase' ? 'Increased' : 'Decreased' }} by
            </span>
            {{ item.change }}
          </p>
          <div class="absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6">
            <div class="text-sm">
              <a href="" class="font-medium text-indigo-600 hover:text-indigo-500">
                查看所有<span class="sr-only"> {{ item.name }} stats</span></a
              >
            </div>
          </div>
        </dd>
      </div>
    </dl>
  </t-card>
</template>

<script lang="ts">
  export default defineComponent({
    setup() {
      const stats = [
        { id: 1, name: '订阅者总数', stat: '71,897', change: '122', changeType: 'increase' },
        { id: 2, name: '平均打开率', stat: '58.16%', change: '5.4%', changeType: 'increase' },
        { id: 3, name: '平均点击率', stat: '24.57%', change: '3.2%', changeType: 'decrease' },
        { id: 4, name: '订阅者总数', stat: '71,897', change: '122', changeType: 'increase' },
        { id: 5, name: '平均打开率', stat: '58.16%', change: '5.4%', changeType: 'increase' },
        { id: 6, name: '平均点击率', stat: '24.57%', change: '3.2%', changeType: 'decrease' },
        { id: 7, name: '订阅者总数', stat: '71,897', change: '122', changeType: 'increase' },
        { id: 8, name: '平均打开率', stat: '58.16%', change: '5.4%', changeType: 'increase' },
        { id: 9, name: '平均点击率', stat: '24.57%', change: '3.2%', changeType: 'decrease' }
      ]
      return {
        stats
      }
    }
  })
</script>

<style scoped></style>
